import React, { useEffect, useState } from "react";
import './manage.css'
import axios from "axios";
import { Layout } from 'antd';
import ReactECharts from 'echarts-for-react';
const { Content } = Layout;

export default function Index() {
    let d = new Date()
    let nian = d.getFullYear()
    let yue = d.getMonth() + 1
    let ri = d.getDate()
    let days = nian + '-' + (yue < 10 ? '0' + yue : yue) + '-' + (ri < 10 ? '0' + ri : ri)
    let [shu, setShu] = useState([])
    let [user, setUser] = useState([])
    let [order, setorder] = useState([])
    let [admin, setadmin] = useState([])
    let newArr = [
        `https://elm.cangdu.org/statis/order/${days}/count`,
        `https://elm.cangdu.org/statis/user/${days}/count`,
        `https://elm.cangdu.org/statis/admin/${days}/count`,
        'https://elm.cangdu.org/v1/users/count',
        'https://elm.cangdu.org/bos/orders/count',
        'https://elm.cangdu.org/admin/count'
    ]
    let z = []
    let x = []
    let c = []
    let arr = []
    for (var i = 7; i > 0; i--) {
        if (ri == 0) {
            yue = yue - 1
            if (yue == 1 || yue == 3 || yue == 5 || yue == 7 || yue == 8 || yue == 10 || yue == 12) {
                ri = 31
            } else if (yue == 2) {
                if (nian % 4 == 0) {
                    ri = 28
                } else {
                    ri = 29
                }
            } else {
                ri = 30
            }
        }

        let day = nian + '-' + (yue < 10 ? '0' + yue : yue) + '-' + (ri < 10 ? '0' + ri : ri)
        arr.unshift(day)
        ri--
    }
    useEffect(() => {
        newArr.forEach(i => {
            axios.get(i).then(res => {
                if (res.data.status === 1) {
                    shu.unshift(res.data.count)
                    setShu([...shu])
                }
            })
        })
        arr.reverse().forEach(i => {
            // console.log(i);
            z.unshift(
                `https://elm.cangdu.org/statis/user/${i}/count`
            )
            x.unshift(
                `https://elm.cangdu.org/statis/order/${i}/count`
            )
            c.unshift(
                `https://elm.cangdu.org/statis/admin/${i}/count`
            )
        })
        z.forEach(k => {
            // console.log(k);
            axios.get(k).then(res => {
                if (res.data.status === 1) {
                    user.unshift(res.data.count)
                    setUser([...user])
                }
            })
        })
        x.forEach(k => {
            // console.log(k);
            axios.get(k).then(res => {
                if (res.data.status === 1) {
                    order.unshift(res.data.count)
                    setorder([...order])
                }
            })
        })
        c.forEach(k => {
            axios.get(k).then(res => {
                if (res.data.status === 1) {
                    admin.unshift(res.data.count)
                    setadmin([...admin])
                }
            })
        })
    }, [])

    let option = {
        title: {
            text: '走势图'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['新注册用户', '新增订单', '新增管理员']
        },
        grid: {
            left: '8%',
            right: '8%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: arr
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '新注册用户',
                type: 'line',
                data: user
            },
            {
                name: '新增订单',
                type: 'line',
                data: order
            },
            {
                name: '新增管理员',
                type: 'line',
                data: admin
            },
        ]
    };

    return <Content>
        <section className="data_section">
            <header className="section_title">数据统计</header>
            <ul className="el-row">
                <li className="huan">当日数据：</li>
                <li><span>{shu[0]}</span><span>新增用户</span></li>
                <li><span>{shu[1]}</span><span>新增订单</span></li>
                <li><span>{shu[2]}</span><span>新增管理员</span></li>
            </ul>
            <ul className="el-row">
                <li className="lan">总数据：</li>
                <li><span>{shu[3]}</span><span>注册用户</span></li>
                <li><span>{shu[4]}</span><span>订单</span></li>
                <li><span>{shu[5]}</span><span>管理员</span></li>
            </ul>
        </section>
        <div className="line1">
            <ReactECharts option={option} />
        </div>
    </Content>
}